<template>
	<view class="apps">
		<view class="flex aic mlr20 bgwhite ptb10">
			<view class="flex aic f1">
				<uv-avatar size='24' :src="info.user.avatar"></uv-avatar><view class="ml10 f26r c333">{{info.user.nickname}}</view>
			</view>
			<uv-tags text="关注" type="warning"></uv-tags>
		</view>
		<view class="w75g96 mt20">
			<image :src="info.activity.image" mode="widthFix" style="width: 750rpx; height:960rpx;"></image>
		</view>
		<view class="head flex fdc mlr20">
			<view class="flex jcsb aic pb10">
				<view class="flex f1 c333 fw600 f26r">{{info.activity.title}}</view>
				<view v-if="info.regist_type.includes('audience') && info.tickets.includes('0')">
					<uv-tags text="FREE" type="success" plain plainFill size="mini"></uv-tags>
				</view>
			</view>
			<view class="pb10 flex aic pl20" v-if="info.activity.tags.length >0">
				<view class="plr10 ptb05 mr10 bdr20 c333 f22r" :style="`background-color:`+tag.bgcolor+ `;`" v-for="(tag,i) in info.activity.tags" :key="i">{{tag.tag_name}}</view>
			</view>
			<view class="flex t3hd mb10 c999 f22r">{{info.activity.description}}</view>
			<view class="flex aic">
				<view class="flex aic mr10" v-if="info.regist_type.includes('audience')">
					<uv-badge :isDot="true" type="success"></uv-badge><view class="f22r c999">观众报名中</view>
				</view>
				<view class="flex aic mr10" v-if="info.regist_type.includes('volunteer')">
					<uv-badge :isDot="true" type="error" v-if="info.voters_count >= info.voters"></uv-badge>
					<uv-badge :isDot="true" type="success" v-else></uv-badge>
					<view class="f22r c999" v-if="info.voters_count >= info.voters">志愿者已满</view><view class="f22r c999">志愿者报名中</view>
				</view>
			</view>
		</view>
		<view class="mt20 bgwhite mlr20 f26r">
			<uv-parse :content="info.activity.content"></uv-parse>
		</view>
	</view>
</template>

<script setup>
	import { util } from '@/common/util.js'
	import { ref , reactive, nextTick, computed } from 'vue'
	import { onLoad, onShow, onHide,onReachBottom } from '@dcloudio/uni-app'
	const id =ref(0),info = ref({});
	const getContent = async ()=>{
		await util.request({url:"/index/detail",type:"post",data:{id:id.value}}).then((rlt)=>{
			if(rlt.code == 1){
				info.value =rlt.data
				console.log(info.value);
			}
		})
	}
	onLoad((e)=>{
		id.value = e.id;
		getContent()
	})
</script>

<style scoped lang="scss">
	.head{background:linear-gradient(to bottom,rgb(255,255,255,0.6),rgb(255,255,255,1)); margin-top:-100rpx; padding-top:20rpx;}
</style>
